document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('textWall');
    const inputButton = document.getElementById('inputButton');
    const inputForm = document.getElementById('inputForm');
    const cancelButton = document.getElementById('cancelButton');
    const submitButton = document.getElementById('submitButton');
    const nicknameInput = document.getElementById('nickname');
    const messageInput = document.getElementById('message');
    
    const words = [
        '勿忘国耻', '铭记历史', '吾辈自强', '振兴中华', '前事不忘', '后事之师', 
        '警钟长鸣', '居安思危', '落后挨打', '强国有我', '民族复兴', '不屈不挠', 
        '奋发图强', '自强不息', '牢记使命', '砥砺前行', '众志成城', '同仇敌忾',
        '勿忘九一八', '国恨家仇', '历史铭记', '珍爱和平', '团结一心', '爱我中华',
        '不忘历史', '缅怀先烈', '勿忘耻辱', '铭记1931', '918警示', '前赴后继',
        '浴血奋战', '抗战精神', '中华崛起', '复兴之路', '铭记918', '国家强盛'
    ];
    
    // 颜色数组
    const colors = [
        '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', 
        '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', 
        '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
    ];
    
    // 存储所有文字元素的数组
    let textElements = [];
    // 动画帧ID
    let animationFrameId;
    // 上次添加新文字的时间
    let lastAddTime = 0;
    // 上次移除文字的时间
    let lastRemoveTime = 0;
    
    // 创建单个文字元素
    function createTextElement(text = null, nickname = null) {
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        
        const textItem = document.createElement('div');
        
        // 如果提供了自定义文本，则使用它，否则随机选择
        const randomWord = text || words[Math.floor(Math.random() * words.length)];
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        const randomSize = Math.floor(Math.random() * 24) + 12; // 12px到36px之间
        
        textItem.classList.add('text-item');
        
        // 如果有昵称，添加到文本前面
        if (nickname) {
            textItem.textContent = `${nickname}: ${randomWord}`;
            textItem.classList.add('new-text'); // 添加新文本动画类
        } else {
            textItem.textContent = randomWord;
        }
        
        textItem.style.color = randomColor;
        textItem.style.fontSize = `${randomSize}px`;
        
        // 随机位置
        const left = Math.random() * (containerWidth - 100);
        const top = Math.random() * (containerHeight - 50);
        textItem.style.left = `${left}px`;
        textItem.style.top = `${top}px`;
        
        // 初始透明度为0，用于淡入效果
        textItem.style.opacity = '0';
        
        // 添加点击事件
        textItem.addEventListener('click', () => {
            // 检查是否已经固定
            if (textItem.dataset.fixed === 'true') {
                // 如果已经固定，则取消固定并恢复移动
                textItem.dataset.fixed = 'false';
                textItem.style.transform = 'scale(1)';
                textItem.style.zIndex = '1';
                textItem.style.boxShadow = 'none';
            } else {
                // 固定在最上层，不再移动
                textItem.dataset.fixed = 'true';
                textItem.style.transform = 'scale(1.2)';
                textItem.style.zIndex = '100';
                textItem.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.7)';
            }
        });
        
        container.appendChild(textItem);
        
        // 淡入效果
        setTimeout(() => {
            textItem.style.opacity = '0.9';
        }, 10);
        
        return textItem;
    }
    
    // 移除元素
    function removeElement(element) {
        const index = textElements.indexOf(element);
        if (index > -1) {
            textElements.splice(index, 1);
            container.removeChild(element);
        }
    }
    
    // 初始创建文字
    function initializeTextElements() {
        // 清空容器和数组
        container.innerHTML = '';
        textElements = [];
        
        // 创建初始文字元素
        for (let i = 0; i < 150; i++) {
            const textItem = createTextElement();
            textElements.push(textItem);
        }
    }
    
    // 随机移除一个文字
    function removeRandomText() {
        if (textElements.length > 0) {
            // 随机选择一个非固定的文字元素
            const nonFixedElements = textElements.filter(el => el.dataset.fixed !== 'true');
            
            if (nonFixedElements.length > 0) {
                const randomIndex = Math.floor(Math.random() * nonFixedElements.length);
                const elementToRemove = nonFixedElements[randomIndex];
                
                // 淡出效果
                elementToRemove.style.opacity = '0';
                
                // 延迟后移除元素
                setTimeout(() => {
                    removeElement(elementToRemove);
                }, 500);
            }
        }
    }
    
    // 添加新文字
    function addNewText(customText = null, nickname = null) {
        // 如果是自定义文本，添加到屏幕中央
        let textItem;
        if (customText) {
            textItem = createTextElement(customText, nickname);
            
            // 将自定义文本放在屏幕中央
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;
            
            textItem.style.left = `${containerWidth / 2 - 100}px`;
            textItem.style.top = `${containerHeight / 2 - 25}px`;
            textItem.style.fontSize = '24px'; // 稍大一些
            textItem.style.fontWeight = 'bold';
            
            // 添加特殊动画效果
            setTimeout(() => {
                // 动画结束后，将文字移动到随机位置
                setTimeout(() => {
                    const newLeft = Math.random() * (containerWidth - 200);
                    const newTop = Math.random() * (containerHeight - 50);
                    
                    textItem.style.transition = 'all 1.5s ease';
                    textItem.style.left = `${newLeft}px`;
                    textItem.style.top = `${newTop}px`;
                    textItem.style.fontWeight = 'normal';
                }, 2000);
            }, 10);
        } else {
            textItem = createTextElement();
        }
        
        textElements.push(textItem);
    }
    
    // 连续动画效果
    function animate() {
        const now = Date.now();
        
        // 每1秒添加1-3个新文字
        if (now - lastAddTime > 1000) {
            const addCount = Math.floor(Math.random() * 3) + 1;
            for (let i = 0; i < addCount; i++) {
                addNewText();
            }
            lastAddTime = now;
        }
        
        // 每1.5秒移除1-2个文字
        if (now - lastRemoveTime > 1500) {
            const removeCount = Math.floor(Math.random() * 2) + 1;
            for (let i = 0; i < removeCount; i++) {
                removeRandomText();
            }
            lastRemoveTime = now;
        }
        
        // 为每个文字添加离子游动效果
        textElements.forEach(item => {
            // 获取当前transform值
            const currentTransform = item.style.transform || '';
            const currentScale = currentTransform.match(/scale\(([^)]+)\)/);
            const currentTranslate = currentTransform.match(/translate\(([^)]+)\)/);
            
            // 当前缩放值，如果没有则默认为1
            let scale = currentScale ? parseFloat(currentScale[1]) : 1;
            
            // 当前位置偏移
            let translateX = 0, translateY = 0;
            if (currentTranslate) {
                const parts = currentTranslate[1].split(',');
                translateX = parseFloat(parts[0]);
                translateY = parseFloat(parts[1]);
            }
            
            // 为每个元素添加一个唯一的数据属性，用于离子游动效果
            if (!item.dataset.ionDirection) {
                item.dataset.ionDirection = Math.random() * Math.PI * 2; // 随机方向（0-2π）
                item.dataset.ionSpeed = 0.05 + Math.random() * 0.1; // 降低随机速度
                item.dataset.lastUpdateTime = now;
            }
            
            // 根据离子方向计算新位置，减少更新频率
            const lastUpdateTime = parseInt(item.dataset.lastUpdateTime || '0');
            const updateInterval = 50; // 每50毫秒更新一次位置，减少抖动
            
            // 如果文字被固定，则跳过位置更新
            if (item.dataset.fixed === 'true') {
                // 保持固定状态，不更新位置
                return;
            }
            
            if (now - lastUpdateTime >= updateInterval) {
                const direction = parseFloat(item.dataset.ionDirection);
                const speed = parseFloat(item.dataset.ionSpeed);
                
                // 计算新位置
                const left = parseFloat(item.style.left);
                const top = parseFloat(item.style.top);
                const newLeft = left + Math.cos(direction) * speed * 5; // 乘以时间因子使移动更明显
                const newTop = top + Math.sin(direction) * speed * 5;
                
                // 边界检测和反弹
                const containerWidth = container.clientWidth;
                const containerHeight = container.clientHeight;
                const itemWidth = item.offsetWidth;
                const itemHeight = item.offsetHeight;
                
                let newDirection = direction;
                
                if (newLeft < 0 || newLeft > containerWidth - itemWidth) {
                    // 水平方向反弹
                    newDirection = Math.PI - direction;
                }
                
                if (newTop < 0 || newTop > containerHeight - itemHeight) {
                    // 垂直方向反弹
                    newDirection = 2 * Math.PI - direction;
                }
                
                // 只有在需要反弹时才改变方向，减少随机性
                if (newDirection !== direction) {
                    item.dataset.ionDirection = newDirection.toString();
                } else {
                    // 极小概率微调方向（减少布朗运动的随机性）
                    if (Math.random() < 0.05) {
                        item.dataset.ionDirection = (direction + (Math.random() - 0.5) * 0.05) % (Math.PI * 2);
                    }
                }
                
                // 更新元素位置
                item.style.left = `${Math.max(0, Math.min(containerWidth - itemWidth, newLeft))}px`;
                item.style.top = `${Math.max(0, Math.min(containerHeight - itemHeight, newTop))}px`;
                
                // 更新最后更新时间
                item.dataset.lastUpdateTime = now.toString();
            }
            
            // 保持缩放稳定，不再随机变化
            scale = 1;
            
            // 应用新的transform（仅用于缩放，保持稳定）
            item.style.transform = `scale(${scale})`;
            
            // 保持透明度稳定，不再随机变化
            item.style.opacity = '0.9';
        });
        
        animationFrameId = requestAnimationFrame(animate);
    }
    
    // 初始化
    initializeTextElements();
    animate();
    
    // 窗口大小改变时重新初始化
    window.addEventListener('resize', () => {
        cancelAnimationFrame(animationFrameId);
        initializeTextElements();
        animate();
    });
    
    // 输入按钮点击事件 - 显示表单
    inputButton.addEventListener('click', () => {
        inputForm.classList.add('active');
        inputButton.style.display = 'none';
    });
    
    // 取消按钮点击事件 - 隐藏表单
    cancelButton.addEventListener('click', () => {
        inputForm.classList.remove('active');
        inputButton.style.display = 'flex';
        // 清空输入
        nicknameInput.value = '';
        messageInput.value = '';
    });
    
    // 提交按钮点击事件 - 添加自定义文字
    submitButton.addEventListener('click', () => {
        const nickname = nicknameInput.value.trim() || '匿名';
        const message = messageInput.value.trim();
        
        if (message) {
            // 添加自定义文字到屏幕中央
            addNewText(message, nickname);
            
            // 隐藏表单
            inputForm.classList.remove('active');
            inputButton.style.display = 'flex';
            
            // 清空输入
            nicknameInput.value = '';
            messageInput.value = '';
        }
    });
});
    
    // 颜色数组
    const colors = [
        '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', 
        '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', 
        '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'
    ];
    
    // 存储所有文字元素的数组
    let textElements = [];
    // 动画帧ID
    let animationFrameId;
    // 上次添加新文字的时间
    let lastAddTime = 0;
    // 上次移除文字的时间
    let lastRemoveTime = 0;
    
    // 创建单个文字元素
    function createTextElement() {
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        
        const textItem = document.createElement('div');
        const randomWord = words[Math.floor(Math.random() * words.length)];
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        const randomSize = Math.floor(Math.random() * 24) + 12; // 12px到36px之间
        
        textItem.classList.add('text-item');
        textItem.textContent = randomWord;
        textItem.style.color = randomColor;
        textItem.style.fontSize = `${randomSize}px`;
        
        // 随机位置
        const left = Math.random() * (containerWidth - 100);
        const top = Math.random() * (containerHeight - 50);
        textItem.style.left = `${left}px`;
        textItem.style.top = `${top}px`;
        
        // 初始透明度为0，用于淡入效果
        textItem.style.opacity = '0';
        
        // 添加点击事件
        textItem.addEventListener('click', () => {
            // 检查是否已经固定
            if (textItem.dataset.fixed === 'true') {
                // 如果已经固定，则取消固定并恢复移动
                textItem.dataset.fixed = 'false';
                textItem.style.transform = 'scale(1)';
                textItem.style.zIndex = '1';
                textItem.style.boxShadow = 'none';
            } else {
                // 固定在最上层，不再移动
                textItem.dataset.fixed = 'true';
                textItem.style.transform = 'scale(1.2)';
                textItem.style.zIndex = '100';
                textItem.style.boxShadow = '0 0 10px rgba(255, 255, 255, 0.7)';
            }
        });
        
        container.appendChild(textItem);
        
        // 淡入效果
        setTimeout(() => {
            textItem.style.opacity = '0.9';
        }, 10);
        
        return textItem;
    }
    
    // 移除元素
    function removeElement(element) {
        const index = textElements.indexOf(element);
        if (index > -1) {
            textElements.splice(index, 1);
            container.removeChild(element);
        }
    }
    
    // 初始创建文字
    function initializeTextElements() {
        // 清空容器和数组
        container.innerHTML = '';
        textElements = [];
        
        // 创建初始文字元素
        for (let i = 0; i < 150; i++) {
            const textItem = createTextElement();
            textElements.push(textItem);
        }
    }
    
    // 随机移除一个文字
    function removeRandomText() {
        if (textElements.length > 100) { // 保持最少100个文字
            const randomIndex = Math.floor(Math.random() * textElements.length);
            const elementToRemove = textElements[randomIndex];
            
            // 淡出效果
            elementToRemove.style.opacity = '0';
            
            setTimeout(() => {
                removeElement(elementToRemove);
            }, 500);
        }
    }
    
    // 添加新文字
    function addNewText() {
        if (textElements.length < 250) { // 限制最大文字数量
            const newElement = createTextElement();
            textElements.push(newElement);
        }
    }
    
    // 连续动画效果
    function animate() {
        const now = Date.now();
        
        // 每隔一段时间添加新文字
        if (now - lastAddTime > 1000) { // 每1秒添加1-3个新文字
            const addCount = Math.floor(Math.random() * 3) + 1;
            for (let i = 0; i < addCount; i++) {
                addNewText();
            }
            lastAddTime = now;
        }
        
        // 每隔一段时间移除文字
        if (now - lastRemoveTime > 1500) { // 每1.5秒移除1-2个文字
            const removeCount = Math.floor(Math.random() * 2) + 1;
            for (let i = 0; i < removeCount; i++) {
                removeRandomText();
            }
            lastRemoveTime = now;
        }
        
        // 为每个文字添加离子游动效果
        textElements.forEach(item => {
            // 获取当前transform值
            const currentTransform = item.style.transform || '';
            const currentScale = currentTransform.match(/scale\(([^)]+)\)/);
            const currentTranslate = currentTransform.match(/translate\(([^)]+)\)/);
            
            // 当前缩放值，如果没有则默认为1
            let scale = currentScale ? parseFloat(currentScale[1]) : 1;
            
            // 当前位置偏移
            let translateX = 0, translateY = 0;
            if (currentTranslate) {
                const parts = currentTranslate[1].split(',');
                translateX = parseFloat(parts[0]);
                translateY = parseFloat(parts[1]);
            }
            
            // 为每个元素添加一个唯一的数据属性，用于离子游动效果
            if (!item.dataset.ionDirection) {
                item.dataset.ionDirection = Math.random() * Math.PI * 2; // 随机方向（0-2π）
                item.dataset.ionSpeed = 0.05 + Math.random() * 0.1; // 降低随机速度
                item.dataset.lastUpdateTime = now;
            }
            
            // 根据离子方向计算新位置，减少更新频率
            const lastUpdateTime = parseInt(item.dataset.lastUpdateTime || '0');
            const updateInterval = 50; // 每50毫秒更新一次位置，减少抖动
            
            // 如果文字被固定，则跳过位置更新
            if (item.dataset.fixed === 'true') {
                // 保持固定状态，不更新位置
                return;
            }
            
            if (now - lastUpdateTime >= updateInterval) {
                const direction = parseFloat(item.dataset.ionDirection);
                const speed = parseFloat(item.dataset.ionSpeed);
                
                // 计算新位置
                const left = parseFloat(item.style.left);
                const top = parseFloat(item.style.top);
                const newLeft = left + Math.cos(direction) * speed * 5; // 乘以时间因子使移动更明显
                const newTop = top + Math.sin(direction) * speed * 5;
                
                // 边界检测和反弹
                const containerWidth = container.clientWidth;
                const containerHeight = container.clientHeight;
                const itemWidth = item.offsetWidth;
                const itemHeight = item.offsetHeight;
                
                let newDirection = direction;
                
                if (newLeft < 0 || newLeft > containerWidth - itemWidth) {
                    // 水平方向反弹
                    newDirection = Math.PI - direction;
                }
                
                if (newTop < 0 || newTop > containerHeight - itemHeight) {
                    // 垂直方向反弹
                    newDirection = 2 * Math.PI - direction;
                }
                
                // 只有在需要反弹时才改变方向，减少随机性
                if (newDirection !== direction) {
                    item.dataset.ionDirection = newDirection.toString();
                } else {
                    // 极小概率微调方向（减少布朗运动的随机性）
                    if (Math.random() < 0.05) {
                        item.dataset.ionDirection = (direction + (Math.random() - 0.5) * 0.05) % (Math.PI * 2);
                    }
                }
                
                // 更新元素位置
                item.style.left = `${Math.max(0, Math.min(containerWidth - itemWidth, newLeft))}px`;
                item.style.top = `${Math.max(0, Math.min(containerHeight - itemHeight, newTop))}px`;
                
                // 更新最后更新时间
                item.dataset.lastUpdateTime = now.toString();
            }
            
            // 保持缩放稳定，不再随机变化
            scale = 1;
            
            // 应用新的transform（仅用于缩放，保持稳定）
            item.style.transform = `scale(${scale})`;
            
            // 保持透明度稳定，不再随机变化
            item.style.opacity = '0.9';
        });
        
        // 持续动画
        animationFrameId = requestAnimationFrame(animate);
    }
    
    // 初始化
    initializeTextElements();
    
    // 启动动画
    setTimeout(() => {
        animate();
    }, 500);
    
    // 窗口大小改变时重新创建文字
    window.addEventListener('resize', () => {
        // 取消当前动画
        if (animationFrameId) {
            cancelAnimationFrame(animationFrameId);
        }
        
        // 重新初始化
        initializeTextElements();
        
        // 重新启动动画
        setTimeout(() => {
            animate();
        }, 500);
    });
});